<template>
	<view>
	<view>
		<uni-datetime-picker v-model="range" type="daterange" @change="changeClick" />
	</view>
	<view class="boxContent" v-for="(item,index) in allDormirotyPatrols":key="index" @click="popToViolationDetail(item)">
		<view  class="header">
			<view class="box">宿舍号</view>
			<view class="box" style="font-weight: 700; font-size: 25rpx;">{{item.buildingName}}-{{item.dormitoryNo}}</view>
		</view>
		<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
		<view class="header">
			<view class="box">违纪次数</view>
			<view class="box" style="font-weight: 700; font-size: 25rpx;">{{item.violationCount}}</view>
		</view>
	</view>
	<view class="pic" v-if="allDormirotyPatrols.length <= 0">
		<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="">
		</image>
	</view>
	</view>
</template>

<script>
	import violations from "../../../api/modules/violation.js"
	import {parseTime} from "@/utils/date.js"
	export default {
		data() {
			return {
				queryParam: {},
				allDormirotyPatrols: [],
				range: [parseTime(Date.now()).slice(0, 10), parseTime(Date.now()).slice(0, 10)],
			}
		},
		methods: {
			changeClick(e){
				console.log('maskClick事件:', e);
				console.log("change事件", this.range)
				this.queryParam.startDate = this.range[0]
				this.queryParam.endDate = this.range[1]
				violations.getPartrolStatistics(this.queryParam).then(res => {
					this.allDormirotyPatrols = res.data
					console.log(res)
				})
				
			},
			popToViolationDetail(e) {
				console.log("popToViolationDetail",e)
				uni.navigateTo({
					url: `/pages_duty/dormitoryTeacher/patrol/patrolStatisticsDetail?startDate=${this.queryParam.startDate}&endDate=${this.queryParam.endDate}&sdId=${e.sdId}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onLoad(options) {
			if(options.dateTime != undefined) {
				console.log("violations onlaod",options.dateTime)
				this.range[0] = options.dateTime
				this.range[1] = options.dateTime
			}
			
			this.changeClick()
		},
	}
</script>

<style>
	.boxContent {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		text-align: center;
		border: 1px solid #a2a2a254;
		/* margin-top: 10rpx; */
	}
	
	.header {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 90rpx;
		width: 50%;
	}
</style>
